<template>
  <div class="clinicIncome">
    <div class="clinicIncome-nav">
      <RadioGroupBtn
        @change="RadioGroupBtnChange"
        v-if="btnList.length > 1"
        :width="'80px'"
        :list="btnList"
      ></RadioGroupBtn>
      <DatePickerAll
        @change="CustomDatePickerChange"
        v-show="btnListValue == '自定义'"
        style="margin-left: 20px"
      ></DatePickerAll>
    </div>
    <div class="clinicIncome-content">
      <div class="clinicIncome-content-title">
        营收概况 <span style="margin-left: 10px;">{{dayjs(startime).format('YYYY-MM-DD')}}~{{dayjs(endtime).format('YYYY-MM-DD')}}</span>
      </div>
      <div class="clinicIncome-content-chart">
        <div
          class="clinicIncome-content-chart-item"
          v-for="(value, index) in list"
          :key="index"
        >
          <div class="clinicIncome-content-chart-item-title">
            {{ value.name }}
          </div>
          <div class="clinicIncome-content-chart-item-num">
            {{ value.total }}
          </div>
        </div>
      </div>

      <div class="clinicIncome-content-title">
        营业收入趋势 <span style="margin-left: 10px;">{{dayjs(startime).format('YYYY-MM-DD')}}~{{dayjs(endtime).format('YYYY-MM-DD')}}</span>
      </div>
      <div
        ref="echartsRef"
        style="width: 100%; height: 380px; margin-top: 10px"
      ></div>
      <div class="clinicIncome-content-title">
        营业订单趋势 <span style="margin-left: 10px;">{{dayjs(startime).format('YYYY-MM-DD')}}~{{dayjs(endtime).format('YYYY-MM-DD')}}</span>
      </div>
      <div
        ref="echartsRef2"
        style="width: 100%; height: 380px; margin-top: 10px"
      ></div>
    </div>
    <div></div>
  </div>
</template>
<script setup lang="ts">
import DatePickerAll from '@/components/DatePickerAll/index.vue';
import useTimeRange from '@/composables/useTimeRange';
const { getTimeRange } = useTimeRange();
import { getClinicIncome } from '@/api/statistics';
// '今天','本周','本月','本年','自定义'
import * as echarts from 'echarts';
import dayjs from 'dayjs';
const btnList = ref<any>([
  { name: '今天', id: '今天' },
  { name: '本周', id: '本周' },
  { name: '本月', id: '本月' },
  { name: '本年', id: '本年' },
  { name: '自定义', id: '自定义' },
]);

const list = ref<any>([
  { name: '营收收入', total: 0 },
  { name: '订单次数', total: 0 },
  { name: '挂号数量', total: 0 },
  { name: '门诊数量', total: 0 },
  { name: '随访数量', total: 0 },
  { name: '检验数量', total: 0 },
  { name: '检查数量', total: 0 },
  { name: '配药数量', total: 0 },
  { name: '发药数量', total: 0 },
  { name: '执行数量', total: 0 },
]);

const objData = ref<any>({});
const formatNumber = (number: number) => {
  return new Intl.NumberFormat('en-US', {
    minimumFractionDigits: 2, // 确保小数点后至少有两位数字
    maximumFractionDigits: 2, // 确保小数点后最多有两位数字
  }).format(number);
};

// const infos = ref<any>({})

const value = ref<number>(1);
const btnListValue = ref<any>(null);
const startime = ref<any>(null);
const endtime = ref<any>(null);
const RadioGroupBtnChange = (e: any) => {
  btnListValue.value = e;
  if (e != '自定义') {
    //console.log(getTimeRange(e));
    startime.value = getTimeRange(e).start
    endtime.value = getTimeRange(e).end
     getClinicIncomeApi()
  }
};
const getClinicIncomeApi = async () => {
  const res = await getClinicIncome({
    startDate: dayjs(startime.value).format('YYYY-MM-DD'),
    endDate:  dayjs(endtime.value).format('YYYY-MM-DD'),
  });
   if(res.code != '200') {

        return
    } 
  // "incomeAmount": 355605, //营业总额
  // "incomeCount": 2, //订单次数
  // "regCount": 1, //挂号数
  // "medicalCount": 1, //门诊数
  // "followupCount": 1, //随访数
  // "labCount": 0, //检验数
  // "examCount": 2, //检查数
  // "dispenseCount": 1, //配药数
  // "deliveryCount": 1, //发药数
  // "execCount": 1, //执行数
  list.value[0].total = formatNumber(res.data.incomeAmount ? (res.data.incomeAmount / 100): 0);
  list.value[1].total = res.data.incomeCount || 0;
  list.value[2].total = res.data.regCount || 0;
  list.value[3].total = res.data.medicalCount || 0;
  list.value[4].total = res.data.followupCount || 0;
  list.value[5].total = res.data.labCount || 0;
  list.value[6].total = res.data.examCount|| 0;
  list.value[7].total = res.data.dispenseCount || 0;
  list.value[8].total = res.data.deliveryCount || 0;
  list.value[9].total = res.data.execCount || 0;
// for (let index = 0; index < list.value.length; index++) {
//   const item = list.value[index];
//   item.total = formatNumber(item.total);
// }

  objData.value = res.data;

  echatsFun(objData.value.trendList)
  echatsFun2(objData.value.trendList)
};
const echartsRef = ref<any>({});
const echartsRef2 = ref<any>({});
const echatsFun = (row:any) => {
  let myChart = echarts.init(echartsRef.value);
  let x = [];
  let y = [];
  for (let index = 0; index < row.length; index++) {
    const item = row[index];
    x.push(item.statDate)
    y.push(item.incomeAmount)
  }
  let option = {
    xAxis: {
      type: 'category',
      data: x,
      axisLabel: {
        color: 'rgba(0, 0, 0, 0.40)', // 设置 x 轴字体颜色为红色
      },
    },
    legend: {
      data: ['收入'],
      icon: 'rect',
      left:'47%',

    },
    grid: {
      left: '0%',
      top: '34px',
      right: '4%',
      bottom: '14%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis'
    },
    color: ['rgba(22, 173, 164, 1)'],
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgba(0, 0, 0, 0.40)', // 设置 x 轴字体颜色为红色
      },
    },
    series: [
      {
        name: '收入',
        data:y,
        type: 'line',
      },
    ],
  };
  myChart.setOption(option);
};
const echatsFun2 = (row:any) => {
  let myChart = echarts.init(echartsRef2.value);
  let x = [];
  let y = [];
  for (let index = 0; index < row.length; index++) {
    const item = row[index];
    x.push(item.statDate)
    y.push(item.incomeCount)
  }
  let option = {
    xAxis: {
      type: 'category',
      data: x,
      axisLabel: {
        color: 'rgba(0, 0, 0, 0.40)', // 设置 x 轴字体颜色为红色
      },
    },
     tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['订单'],
      left:'47%',
      icon: 'rect',
    },
    grid: {
      left: '0%',
      top: '34px',
      right: '4%',
      bottom: '14%',
      containLabel: true,
    },
    color: ['rgba(22, 173, 164, 1)'],
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgba(0, 0, 0, 0.40)', // 设置 x 轴字体颜色为红色
      },
    },
    series: [
      {
        name: '订单',
        data: y,
        type: 'line',
      },
    ],
  };
  myChart.setOption(option);
};

const CustomDatePickerChange = (e: any) => {
  //console.log(e);
  if(e[0] == null || e[1] == null) {
    return
  }
  startime.value = e[0];
  endtime.value = e[1];
  getClinicIncomeApi()
};
onMounted(() => {
  RadioGroupBtnChange(btnList.value[0].id);
  // echatsFun()
  // echatsFun2()
});
</script>
<style lang="scss" scoped>
.clinicIncome {
  padding: 20px 24px;
  .clinicIncome-nav {
    display: flex;
    align-items: center;
  }
}
.clinicIncome-content {
  margin-top: 20px;
  padding: 32px;
  background-color: #fff;
  .clinicIncome-content-title {
    font-weight: 400;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.9);
    text-align: left;
    font-style: normal;
    text-transform: none;
    span {
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.4);
      font-style: normal;
      text-transform: none;
    }
  }
}
.clinicIncome-content-chart {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
  margin-bottom: 24px;
  .clinicIncome-content-chart-item {
    width: 320px;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #dcdcdc;
    padding: 24px 32px;

    border-radius: 6px 6px 6px 6px;
    border: 1px solid #dcdcdc;
    .clinicIncome-content-chart-item-title {
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .clinicIncome-content-chart-item-num {
      margin-top: 10px;
      width: 129px;
      font-weight: 400;
      font-size: 28px;
      color: #16ada4;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
</style>
